import React, { Component } from 'react'
import { View, Text, Image, StyleSheet, findNodeHandle  } from 'react-native'
import { BlurView } from '@react-native-community/blur'
import Album from './components/Album'
import PlayPanel from './components/PlayPanel'
import Lyrics from './components/Lyrics'

const styles = StyleSheet.create({
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  }
})

export default class PlayDetail extends Component {
  static navigationOptions = {
    title: '播放页',
    headerTransparent: true,
    headerTintColor: '#fff'
  }
  state = {
    viewRef: null,
    showLyrics: false
  }
  imageLoaded() {
    this.setState({ viewRef: findNodeHandle(this.refs.backgroundImage) });
  }
  toggleShowLyrics() {
    this.setState({
      showLyrics: !this.state.showLyrics
    })
  }
  render() {
    return (
      <View>
        <Image
          ref="backgroundImage"
          source={require('../../../assets/bg.jpg')}
          resizeMode="cover"
          style={{width: '100%', height: '100%'}}
          onLoadEnd={this.imageLoaded.bind(this)}
        />
        {
          this.state.viewRef ? <BlurView style={styles.absolute} blurType="dark" blurAmount={6}  viewRef={this.state.viewRef}/> : null
        }
        <View style={{...styles.absolute, flexDirection: 'column', paddingTop: 50}}>
          <View style={{flex: 1}}>
            {
              this.state.showLyrics ? <Lyrics onClick={this.toggleShowLyrics.bind(this)}/> : <Album onClick={this.toggleShowLyrics.bind(this)}/>
            }
          </View>
          <PlayPanel/>
        </View>
      </View>      
    )
  }
}